<template>
  <div class="Home">
    <!-- 点位概括 -->
    <a-row :gutter="30">
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>当前代理商总数:</span>
              <span>{{agentCount}}</span>
            </p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>网点总数:</span>
              <span>{{posCount}}</span>
            </p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>点位总数:</span>
              <span>{{deviceCount}}</span>
            </p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box gutter-box-four">
          <a-card>
            <p class="downline">
              <span>不在线设备数:</span>
              <span>2</span>
            </p>
            <p class="line">
              <span>在线设备数</span>
              <span>0</span>
            </p>
          </a-card>
        </div>
      </a-col>
    </a-row>
    <!-- 点位概括中国地图 -->
    <a-card style="margin-top:2%;">
      <div id="main" :style="{width: '800px', height: '600px'}"></div>
    </a-card>
    <!-- 点位概括中国地图 -->

    <!-- 中国地图下的部分 -->
    <a-tabs type="card" style="margin-top:2%;" class="table_class">
      <a-tab-pane tab="今日数据" key="1">
        <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">实际入账总额：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle" />
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>

            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/微信@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">微信收入：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle" />
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>

            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/支付宝@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">支付宝收入：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle" />
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>

          <a-row :gutter="30" style="margin-top:2%;">
            <a-col :span="12">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="6">
                    <img src="../../assets/订单总数.png" alt />
                  </a-col>
                  <a-col :span="5">
                    <a-row style="font-size:1rem;" :span="18">订单量:</a-row>
                    <a-row
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                      :span="18"
                    >126159</a-row>
                  </a-col>
                  <a-col :span="13"></a-col>
                </a-row>
              </a-card>
            </a-col>

            <a-col :span="12">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row>
                      <a-col :span="18">客单价：</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>

          <a-row :gutter="30" style="margin-top:2%;">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/总用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">总用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >30000</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>

            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/新增用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">新增用户数：</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 333,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>

            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">成交用户数：</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >89</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
      <a-tab-pane tab="昨日数据" key="2">
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
      </a-tab-pane>
      <a-tab-pane tab="本周数据" key="3">
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
      </a-tab-pane>
      <a-tab-pane tab="本月数据" key="4">
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
      </a-tab-pane>
      <a-tab-pane tab="近七日数据" key="5">
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
      </a-tab-pane>
      <a-tab-pane tab="近30日数据" key="6">
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
      </a-tab-pane>
      <a-tab-pane tab="自定义" key="7">
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
      </a-tab-pane>

      <div class="time_kuang">
        <a-range-picker :style="{width: '256px'}" />
      </div>
    </a-tabs>
    <!-- 中国地图下的部分 -->

    <!-- 入账折线图 -->
    <a-card style="margin-top:2%">
      <div id="line_main" :style="{width: '95%', height: '460px'}">222</div>
    </a-card>
    <!-- 入账折线图 -->

    <!-- 微信 -->
    <a-card style="margin-top:2%">
      <div id="line_main_two" :style="{width: '93%', height: '460px'}"></div>
    </a-card>
    <!-- 微信 -->

    <!-- 支付宝 -->
    <a-card style="margin-top:2%">
      <div id="aline_pay" :style="{width: '93%', height: '460px'}"></div>
    </a-card>
    <!-- 支付宝 -->

    <!-- 订单量 -->
    <a-card style="margin-top:2%">
      <div id="order_size" :style="{width: '93%', height: '460px'}"></div>
    </a-card>
    <!-- 订单量 -->

    <!-- 客单价折线图 -->
    <a-card style="margin-top:2%">
      <div id="customer" :style="{width: '93%', height: '460px'}"></div>
    </a-card>
    <!-- 客单价折线图 -->

    <!-- 总用户数折线图 -->
    <a-card style="margin-top:2%">
      <div id="usernumber" :style="{width: '93%', height: '460px'}"></div>
    </a-card>
    <!-- 总用户数折线图 -->

    <!-- 新增用户数折线图 -->
    <a-card style="margin-top:2%">
      <div id="adduser" :style="{width: '93%', height: '460px'}"></div>
    </a-card>
    <!-- 新增用户数折线图 -->

    <!-- 成交用户数折线图 -->
    <a-card style="margin-top:2%">
      <div id="commit" :style="{width: '93%', height: '460px'}"></div>
    </a-card>
     <!-- 成交用户数折线图 -->

    <!-- 代理商销售柱状图排行 -->
    <a-card style="margin-top:2%">
      <a-tabs defaultActiveKey="1">
        <div class="extra-wrapper" slot="tabBarExtraContent">
          <div class="extra-item">
            <a>今日</a>
            <a>近七天</a>
            <a>近30天</a>
          </div>
          <a-range-picker :style="{width: '256px'}" />
        </div>
        <a-tab-pane tab="代理商销售排行" key="1">
           <ve-histogram :data="chartData" :colors="chartColors" :settings="chartSettings" :extend="chartExtend"></ve-histogram>
        </a-tab-pane>
        <a-tab-pane tab="网点销售排行" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
        <a-tab-pane tab="品类销售排行" key="3">Content of Tab Pane 3</a-tab-pane>
      </a-tabs>
    </a-card>
   <!-- 代理商销售柱状图排行 -->
  </div>
</template>

<script>
// echarts图表的使用
var echarts = require("echarts");
import "echarts/map/js/china";
// echarts图表的使用

export default {
  name: "Home",
  data() {
     this.chartSettings = {
        stack: { '用户': ['访问用户', '下单用户'] }
      }
      this.chartColors=[
        "#FF796E"
      ]
      this.chartExtend={
        title:{
            text:"今日网点销售排行" ,
            left: "33%",
            top: 3,
            width: 110,
            
            textStyle: {
              color: "#FF796E",
              "font-weight": 100,
              fontSize: 16 ,
              opacity:0.2,
              "font-family":"SourceHanSansCN-Light"
            }
          },
              grid:{
                    x:25,
                    y:80,
                    x2:5,
                    y2:20,
                    borderWidth:1
                }}
      
    return {
      //柱状图的数据
        chartData: {
          columns: ['日期', '销售额',  '排行'],
          rows: [
            { '日期': '网点1', '销售额': 8000, '排行': 1 },
            { '日期': '网点2', '销售额': 7000, '排行': 2 },
            { '日期': '网点3', '销售额': 6000,'排行': 3 },
            { '日期': '网点4', '销售额': 5000,  '排行': 4 },
            { '日期': '网点5', '销售额': 4000,  '排行': 5 },
            { '日期': '网点6', '销售额': 3000,  '排行': 6 },
              { '日期': '网点7', '销售额': 2000,  '排行':7 },
                { '日期': '网点8', '销售额': 1000,  '排行': 8 },
                  { '日期': '网点9', '销售额': 500,  '排行': 9 }
          ]
        },
      //柱状图的数据

      //地图的数据
      mapdata: [
        {
          //此处可增加散点--前俩位数字应该是表示经纬度
          name: "武汉",
          value: [114.31, 30.52, 2, 3, 4, "天溯科技城"]
        },
        {
          name: "大庆",
          value: [125.03, 46.58, 279, 3, 2, "大数据产业基地"]
        }
      ],
      //地图的数据
      agentCount: "",
      branchCount: "",
      posCount: "",
      deviceCount: ""
    };
  },
  components: {},
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    // 设备概况统计
    deviceStats() {
      this.axios
        .post(this.baseUrl + "/homepage/deviceStats", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response);
          this.agentCount = response.data.data.agentCount;
          this.branchCount = response.data.data.branchCount;
          this.posCount = response.data.data.posCount;
          this.deviceCount = response.data.data.deviceCount;
          // if (response.data.code == -105) {
          //   this.$router.push({
          //     path: "/login"
          //   });
          // }
        });
    },

    //在此处使用中国地图
    ko() {
      var myChart = this.echarts.init(document.getElementById("main"));
      myChart.setOption({
        // "backgroundColor": "#404a59",
        animation: true,
        animationDuration: 1000,
        animationEasing: "cubicInOut",
        animationDurationUpdate: 1000,
        animationEasingUpdate: "cubicInOut",
        title: [
          {
            id: "statistic",
            right: 120,
            top: 40,
            width: 100,

            text: "点位位置",
            left: "center",

            textStyle: {
              color: "#000000",
              fontSize: 19
            }
          }
        ],
        toolbox: {
          iconStyle: {
            normal: {
              borderColor: "#108EFF"
            },
            emphasis: {
              borderColor: "#b1e4ff"
            }
          }
        },
        geo: {
          map: "china",
          left: "10",
          right: "10%",
          // zoom: 1,
          label: {
            emphasis: {
              show: false
            }
          },
          //此处控制是否进行地图缩放的
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#689DFF",
              borderColor: "rgba(255,255,255,0.05)"
            },
            emphasis: {
              areaColor: "#108EFF"
            }
          }
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(255,255,255,0.90)",
          padding: [10],
          textStyle: {
            color: "#43484D",
            fontSize: "12"
          },
          formatter: function(params) {
            console.log("params", params);
            var html = "<b>" + params.name + "</b><br>";
            html +=
              "点位地址:" +
              '<em style="color:#fb7857;font-style: normal; "> ' +
              params.value[5] +
              "</em></br>";
            html +=
              "所属代理商:" +
              '<em style="color:#fb7857;font-style: normal; "> ' +
              params.value[2] +
              "万元</em></br>";
            html +=
              "所属网点:" +
              '<em style="color:#fb7857;font-style: normal; "> ' +
              params.value[3] +
              "%</em></br>";
            html +=
              "不在线设备数:" +
              '<em style="color:#fb7857;font-style: normal; "> ' +
              params.value[4] +
              "</em></br>";
            html +=
              "在线设备数:" +
              '<em style="color:#fb7857;font-style: normal; "> ' +
              params.value[4] +
              "</em></br>";
            return html;
          }
        },
        grid: {
          right: 40,
          top: 100,
          bottom: 40,
          width: "30%"
        },
        xAxis: {
          type: "value",
          scale: true,
          position: "top",
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 2,
            textStyle: {
              color: "#aaa"
            }
          }
        },
        yAxis: {
          type: "category",
          name: "",
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ddd"
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: "#ddd"
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#ddd"
            }
          },
          data: []
        },
        series: [
          {
            name: "pm2.5",
            type: "scatter",
            coordinateSystem: "geo",
            data: [
              {
                //此处可增加散点--前俩位数字应该是表示经纬度
                name: "武汉",
                value: [114.31, 30.52, 273, 111,1,"天溯科技"]
              },
              {
                name: "大庆",
                value: [125.03, 46.58, 279, 222,2]
              },
              {
                name: "新疆",
                value: [125.03, 46.58, 279, 222,2]
              }
            ],
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#ddb926"
              }
            }
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data:this.mapdata,
            //此处可修改数据
            // data: [
            //   {
            //     name: "点位一",
            //     value: [114.31, 30.52, 2, 3, 4,"天溯科技城"]
            //   },
            //   {
            //     name: "点位二",
            //     value: [125.03, 46.58, 279, 3, 2, "大数据产业基地"]
            //   }
            // ],
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#f4e925",
                shadowBlur: 10,
                shadowColor: "#333"
              }
            },
            zlevel: 1
          }
        ]
      });
    },
    //在此处使用中国地图

    // 折线图
    line_ko() {
      var line_myChart = this.echarts.init(
        document.getElementById("line_main")
      );
      console.log(line_myChart);
  
      line_myChart.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日实际入账总额变化趋势",
            left: "center",

            textStyle: {
              color: "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "销售额/元",
            itemStyle: {
              normal: {
                color: "#46BB36",
                lineStyle: {
                  color: "#46BB36"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    line_ko_two() {
      this.weixin_myChart = this.echarts.init(
        document.getElementById("line_main_two")
      );
      console.log(this.weixin_myChart);
      //  window.onresize = weixin_myChart.resize
      this.weixin_myChart.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日微信收入变化趋势",
            left: "center",

            textStyle: {
              // "color": "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "销售额/元",
            itemStyle: {
              normal: {
                color: "#08AAEC",
                lineStyle: {
                  color: "#08AAEC"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    line_ko_three() {
      this.aline_pay = this.echarts.init(document.getElementById("aline_pay"));
      console.log(this.aline_pay);
      //  window.onresize = weixin_myChart.resize
      this.aline_pay.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日支付宝收入变化趋势",
            left: "center",

            textStyle: {
              // "color": "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "销售额/元",
            itemStyle: {
              normal: {
                color: "#2EC15A",
                lineStyle: {
                  color: "#2EC15A"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    line_ko_four() {
      this.order_size = this.echarts.init(
        document.getElementById("order_size")
      );
      console.log(this.aline_pay);
      //  window.onresize = weixin_myChart.resize
      this.order_size.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日订单量变化趋势",
            left: "center",

            textStyle: {
              // "color": "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "订单量/量",
            itemStyle: {
              normal: {
                color: "#108EFF",
                lineStyle: {
                  color: "#108EFF"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    line_ko_five() {
      this.customer = this.echarts.init(document.getElementById("customer"));
      // console.log( this.aline_pay);
      //  window.onresize = weixin_myChart.resize
      this.customer.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日客单价变化趋势",
            left: "center",

            textStyle: {
              // "color": "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "客单价/元",
            itemStyle: {
              normal: {
                color: "#F04964",
                lineStyle: {
                  color: "#F04964"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    line_ko_six() {
      this.usernumber = this.echarts.init(
        document.getElementById("usernumber")
      );
      // console.log( this.aline_pay);
      //  window.onresize = weixin_myChart.resize
      this.usernumber.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日总用户数变化趋势",
            left: "center",

            textStyle: {
              // "color": "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "总用户数/人",
            itemStyle: {
              normal: {
                color: "#FFBE61",
                lineStyle: {
                  color: "#FFBE61"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    line_ko_seven() {
      this.adduser = this.echarts.init(document.getElementById("adduser"));
      // console.log( this.aline_pay);
      //  window.onresize = weixin_myChart.resize
      this.adduser.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日新增用户数变化趋势",
            left: "center",

            textStyle: {
              // "color": "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "总用户数/人",
            itemStyle: {
              normal: {
                color: "#3C8C0B",
                lineStyle: {
                  color: "#3C8C0B"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    line_ko_eight() {
       this.commit = this.echarts.init(
        document.getElementById("commit")
           );
      // console.log( this.aline_pay);
      //  window.onresize = weixin_myChart.resize
       this.commit.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日成交用户数变化趋势",
            left: "center",

            textStyle: {
              // "color": "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "总用户数/人",
            itemStyle: {
              normal: {
                color: "#9A64E3",
                lineStyle: {
                  color: "#9A64E3"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
  },
  mounted() {
    this.ko();
    this.line_ko();
    this.line_ko_two();
    this.line_ko_three();
    this.line_ko_four();
    this.line_ko_five();
    this.line_ko_six();
    this.line_ko_seven();
    this.line_ko_eight();
    //多个echarts图表进行自适应
    let _this = this;
    window.addEventListener("resize", function(event) {
        _this.line_myChart.resize();
        _this.weixin_myChart.resize();
        _this.aline_pay.resize();
        _this.order_size.resize();
        _this.customer.resize(); 
        _this.usernumber.resize();
       _this.adduser.resize() ;
         _this.commit.resize() ;
        
    });
  },
  created() {
    this.deviceStats();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table_class {
  position: relative;
}
.time_kuang {
  /* line-height: 20px;
  /* margin-top: -100px; */
  position: absolute;
  right: 40%;

  top: 0%;
}
#main {
  margin: 0 auto;
}
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  padding: 5px 0;
}
/* .gutter-box-four{
  padding: 2px 0!important
} */
.gutter-box .ant-card {
  transition: all 0s;
}
.gutter-box .ant-card:hover {
  box-shadow: 0 10px 10px rgb(207, 227, 246);
  transform: translateY(-5%);
}
.gutter-box .ant-card-body p {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* box-sizing: border-box; */
  margin: 0;
}
/* .ant-card-body{
  padding-top: 2px;
} */
/* .gutter-box-four  .ant-card .ant-card-body{
    padding:5px!important
  } */
.gutter-box-four .ant-card-body p {
  display: flex;
  line-height: 25px;

  padding-top: 3px !important;
}
.gutter-box-four .ant-card-body p span:nth-of-type(1) {
  font-size: 1.2em;
  color: black;
}
.gutter-box-four .ant-card-body p span:nth-of-type(2) {
  font-size: 2.5em;
  color: rgb(39, 39, 39);
}
.gutter-box-four .ant-card-body p:nth-of-type(2) span:nth-of-type(1) {
  font-size: 1.2em;
  color: rgb(39, 39, 39);
}
.gutter-box-four .ant-card-body p:nth-of-type(2) span:nth-of-type(2) {
  font-size: 1.2em;
  color: rgb(39, 39, 39);
}
/* .downline{
  
} */
.gutter-box .ant-card-body p span:nth-of-type(1) {
  font-size: 1.2em;
  color: black;
}
.gutter-box .ant-card-body p span:nth-of-type(2) {
  font-size: 2.5em;
  color: rgb(39, 39, 39);
}

.ant-tabs-bar {
  border-bottom: none;
}

.extra-wrapper {
  line-height: 40px;
  padding-right: 24px;
}
.extra-item {
  display: inline-block;
  margin-right: 24px;
}
a {
  margin-left: 24px;
}
</style>
